<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>geolocation</title>
</head>
<body>

<input type="button" value="request" id="btn1"><br>
<textarea id="t1" style="width:400px;height:200px;"></textarea>

<br>
<input type="button" value="request" id="btn2"><br>
<textarea id="t2" style="width:400px;height:200px;"></textarea>



<script>

window.onload = function(){
    var btn1 = document.getElementById("btn1");
    var t1 = document.getElementById("t1");
    btn1.onclick = function(){
        // 单次定位请求
        navigator.geolocation.getCurrentPosition(function(position){
            
            // 请求成功函数
            console.log(position);
            t1.value += '经度：' + position.coords.longitude;
            t1.value += '\n维度：' + position.coords.latitude;
            t1.value += '\n准确度：' + position.coords.accuracy;
            t1.value += '\n海拔：' + position.coords.altitude;
            t1.value += '\n海拔准确度：' + position.coords.altutudeAcuracy;
            t1.value += '\n进行方向：' + position.coords.heading;
            t1.value += '\n地面速度：' + position.coords.speed;
            t1.value += '\n时间戳：' + new Date(position.timestamp);
        }, function(err){
            // 请求失败函数
            // code：失败编号
            // 0：不包括其他错误编号中的错误
            // 1：用户拒绝浏览器获取位置信息
            // 2：尝试获取用户信息，但失败了
            // 3：设置了timeout值，获取位置超时
            console.log(err.code)
        },{
            // 数据收集，json格式
            // 更精确查找，默认false
            enableHighAcuracy: true,
            // 获取位置允许最长时间，默认infinity
            timgout:  3000,
            // 位置可以缓存的最大时间，默认0
            maximumAge: 5000
        });
    }





    var btn2 = document.getElementById("btn2");
    var t2 = document.getElementById("t2");
    var timer2 = null;
    btn2.onclick = function(){

        // 多次定位请求            
        timer = navigator.geolocation.watchPosition(function(position){            
            // 请求成功函数
            console.log(position);
            t2.value += '经度：' + position.coords.longitude;
            t2.value += '\n维度：' + position.coords.latitude;
            t2.value += '\n准确度：' + position.coords.accuracy;
            t2.value += '\n海拔：' + position.coords.altitude;
            t2.value += '\n海拔准确度：' + position.coords.altutudeAcuracy;
            t2.value += '\n进行方向：' + position.coords.heading;
            t2.value += '\n地面速度：' + position.coords.speed;
            t2.value += '\n时间戳：' + new Date(position.timestamp);
        }, function(err){
            // 请求失败函数
            // code：失败编号
            // 0：不包括其他错误编号中的错误
            // 1：用户拒绝浏览器获取位置信息
            // 2：尝试获取用户信息，但失败了
            // 3：设置了timeout值，获取位置超时
            console.log(err.code);
            navigator.geolocation.clearWatch(timer2);
        },{
            // 数据收集，json格式
            enableHighAcuracy: true,
            timgout:  3000,
            maximumAge: 5000,
            // 更新的频率
            frequency: 1000
        });
    }
}

</script>
</body>
</html>